<template>
    <div style="">
        <div class="sourceReply">
            问询回复
        </div>
        <div class="file-div">
            <span>*回复内容</span>
            <Input class="file-input" v-model="answerText" type="textarea" :rows="4" placeholder="请输入问询内容" maxlength="500" show-word-limit />
        </div>
        <div class="file-div" style="margin-top:20px">
            <span>照片</span>
            <div class="file-input" style="border:1px solid #dcdee2;border-radius:4px; height:80px;">
                <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="item.fileIds">
                    <template>
                        <img :src=" fileUploadUrl + '/file/downFile/' + item.fileIds"/>
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="handleView(index,'pic')"></Icon>
                            <Icon type="ios-trash-outline" @click.native="handleRemove(index,'pic')"></Icon>
                        </div>
                    </template>
                </div>
                <Upload v-show="uploadList.length < 5"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    :format="['JPG','JPEG','PNG','BMP','TIF','GIF','PJPEG','JFIF','PJP']"
                    :max-size="5120"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload('pic')"
                    multiple
                    type="drag"
                    :action="uploadUrl"
                    style="display: inline-block;width:58px;margin-top: 10px;margin-left:10px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                    </div>
                </Upload>
            </div>
        </div>
        <!-- <div class="file-div" style="margin-top:20px">
            <span>视频</span>
            <div class="file-input" style="border:1px solid #dcdee2;border-radius:4px; height:80px;">
                <div class="demo-upload-list" v-for="(item,index) in uploadListVideo" :key="item.fileIds">
                    <template>
                        <video :src=" fileUploadUrl + '/file/downFile/' + item.fileIds" controls="controls"></video>
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="handleView(index,'video')"></Icon>
                            <Icon type="ios-trash-outline" @click.native="handleRemove(index,'video')"></Icon>
                        </div>
                    </template>
                </div>
                <Upload v-show="uploadListVideo.length < 5"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccessVideo"
                    :format="['AVI','mov','rmvb','rm','FLV','mp4','3GP']"
                    :max-size="5120"
                    :on-format-error="handleFormatErrorVideo"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload('video')"
                    multiple
                    type="drag"
                    :action="uploadUrl"
                    style="display: inline-block;width:58px;margin-top: 10px;margin-left:10px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="md-arrow-dropright-circle" size="20" />
                    </div>
                </Upload>
            </div>
        </div>
        <div class="file-div" style="margin-top:20px">
            <span>附件</span>
            <div class="file-input" style="border:1px solid #dcdee2;border-radius:4px; min-height:80px;">
                <div class="file-box" v-for="(item,index) in uploadListFile" :key="index">
                    {{item.fileNames}}
                    <a target='_black' :href="fileUploadUrl + '/file/downFile/' + item.fileIds" style="padding:0 10px;">下载</a>
                    <a target='_black' @click="handleRemove(index,'file')">删除</a>
                </div>
                <Upload v-show="uploadListFile.length < 5"
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccessFile"
                    :format="['DOC','DOCX','PPT','TXT','PDF','XLS','XLSX','ZIP','RAR']"
                    :max-size="20480"
                    :on-format-error="handleFormatErrorFile"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload('file')"
                    multiple
                    
                    :action="uploadUrl"
                    style="display: inline-block;width:28px;margin-top: 10px;margin-left:10px;width: 100px;">
                    <div style="width: 100px; height:28px;line-height: 28px;">
                        <Button icon="ios-cloud-upload-outline">上传附件</Button>
                    </div>
                </Upload>
            </div>
        </div> -->
        <div style="margin-top:30px;width:100%;text-align:center;">
            <Button type="primary" @click="questionAddAnswer">提交</Button>
            <Button style="margin-left:20px" @click="closetab">取消</Button>
        </div>
        <Modal :title="ModalTitle" v-model="isModal" :footer-hide="true">
            <img v-show="modelType == 'pic'" :src="fileUploadUrl + '/file/downFile/' + previewYl" style="width: 100%; height: 300px;" />
            <video v-show="modelType == 'video'" :src="fileUploadUrl + '/file/downFile/' + previewYl" controls="controls" style="width: 100%; height: 300px;"></video>
        </Modal>
    </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
    data(){
        return{
            answerText:'',
            uploadList:[],
            uploadListVideo:[],
            uploadListFile:[],
            uploadUrl:'',
            fileServer:'',
            fileUploadUrl: process.env.VUE_APP_FILE_SERVER_URL,
            ModalTitle:'',
            isModal:false,
            previewYl:'',
            modelType:'',
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        ...mapMutations(['closeTag']),
        questionAddAnswer(){
            if(!this.answerText){
                this.$Message.error('回复内容不能为空')
                return
            }
            let parmes = {
                questionId:this.$route.query.questionId,
                parentId:this.$route.query.parentId,
                answerText:this.answerText,
                questionUserId:this.$route.query.questionUserId,
                pictureIdList:[],
                vedioIdList:[],
                attachmentIdList:[]
            }
            this.uploadList.forEach(e => {
                parmes.pictureIdList.push(e.fileIds)
            })
            this.uploadListVideo.forEach(e => {
                parmes.vedioIdList.push(e.fileIds)
            })
            this.uploadListFile.forEach(e => {
                let obj = {
                    fileIds:e.fileIds,
                    fileNames:e.fileNames
                }
                parmes.attachmentIdList.push(obj)
            })
            this.$api.messageManage.questionAddAnswer(parmes).then(resp=>{
                if(resp.code == 200){
                    this.$Message.success('回复成功')
                    this.closetab()
                }else{
                    this.$Message.error(resp.data)
                }
            })
        },
        // 编辑关闭/取消
        closetab() {
            let self = this
            self.closeTag({
                name: 'Information-detail',
                query: {
                    questionId: self.$route.query.questionId,
                    questionUserId: self.$route.query.questionUserId,
                    parentId: self.$route.query.parentId
                }
            })
        },
        handleView(index,type){
            this.isModal = true
            if(type == 'pic'){
                this.previewYl = this.uploadList[index].fileIds
                this.ModalTitle = '图片预览'
                this.modelType = 'pic'
            }else if(type == 'video'){
                this.previewYl = this.uploadListVideo[index].fileIds
                this.ModalTitle = '视频预览'
                this.modelType = 'video'
            }
        },
        handleRemove(index,type){
            if(type == 'pic'){
                this.uploadList.splice(index,1)
            }else if(type == 'video'){
                this.uploadListVideo.splice(index,1)
            }else{
                this.uploadListFile.splice(index,1)
            }
        },
        init() {
            this.fileServer = process.env.VUE_APP_FILE_SERVER_URL
            this.uploadUrl = `${this.fileServer}file/uploadFile`
        },
        handleSuccess (resp, file) {
            this.uploadList.push(resp)
        },
        handleSuccessVideo (resp, file) {
            this.uploadListVideo.push(resp)
        },
        handleSuccessFile (resp, file){
            this.uploadListFile.push(resp)
        },
        handleFormatError (file) {
            this.$Message.error(`${file.name}格式不正确`)
        },
        handleFormatErrorVideo (file) {
            this.$Message.error(`${file.name}格式不正确`)
        },
        handleFormatErrorFile (file) {
            this.$Message.error(`${file.name}格式不正确`)
        },
        handleMaxSize (file) {
            this.$Message.error(`${file.name}大小超过5m`)
        },
        handleBeforeUpload (type) {}
    }
}
</script>
<style lang="scss" scoped>
.sourceReply{
    height: 60px;
    line-height: 20px;
    margin-bottom: 20px;
    color: #6E7E9B;
    padding: 20px 20px 0 20px;
    border-bottom: solid 1px #E3E8EE;
}
.file-div{
    width: 100%;
    display: table;
    padding:0 20px;
    span{
        width: 100px;
        display: block;
        float:left;
        padding-top: 10px;
    }
    .file-input{
        width:calc(100% - 100px);
        float:left;
        .file-box{
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
        }
    }
}
.demo-upload-list{
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    float:left;
    margin-top: 10px;
    margin-left:10px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>